<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工信息列表</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body>
<!--    布局内容-->
<div class="layui-btn-container" id="app">
    <!--        列表-->
    <table class="layui-table">
        <button type="button" class="layui-btn layui-btn-fluid">
            <a th:href="@{/emp/add}">点击添加员工信息</a>
        </button>

        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="employee:${employees}">
            <td th:text="${employee.id}">余小小</td>
            <td th:text="${employee.lastName}">余小小</td>
            <td th:text="${employee.email}">余小小</td>
            <td th:text="${employee.gender}">余小小</td>
            <td>
                <!--                    <button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">删除</button>-->

                <a @click="deleteEmployee()" th:href="@{'/emp/delete/'+${employee.id}}">删除</a>
                <!--                    需要先传入当前id，得到dao中的对象-->
                <a th:href="@{'/emp/update/'+${employee.id}}">更新</a>
            </td>
        </tr>
        </tbody>
    </table>

    <form method="post">
        <!--        发送delete请求 -->
        <input type="hidden" name="_method" value="delete">
    </form>
</div>
<!-- body 末尾处引入 layui -->
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/vue/vue.js}"></script>
<script th:src="@{/static/jquery/jquery.js}"></script>
<script th:src="@{/static/axios/axios.main.js}"></script>
<script src="../../static/vue/vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: '#app',
        methods: {
            deleteEmployee() {
                //得到form表单的dom对象
                var form = document.getElementsByTagName("form")[0]
                //     将超链接的href属性赋值给form表单 target当前的目标对象
                form.action = event.target.href;
                //     提交表单
                form.submit();
                //     阻止a标签默认行为
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>